<template>
  <div class="home">
    <div class="top">
      <img class="logo" src="../../assets/logos.png" />
      <!-- <div v-if="!store.state.token" class="login">
        <el-button type="primary" color="#ff7214" @click="showLoginModal"
          >登录</el-button
        >
      </div>
      <div v-else style="margin-top: 14px">
        <div
          style="
            display: flex;
            justify-content: flex-start;
            align-items: center;
          "
        >
          <div
            @click="onChangeUnlock"
            style="
              display: flex;
              justify-content: flex-start;
              align-items: center;
            "
          >
            <img class="avatar" src="../../assets/images/default-avatar.svg" />
          </div>
          <el-button
            style="margin-left: 10px"
            type="danger"
            size="small"
            plain
            @click="loginOut"
            >退出登录</el-button
          >
        </div>
      </div> -->
    </div>
    <div class="main">
      <!-- <el-menu
        :default-active="activeIndex"
        class="el-menus"
        mode="horizontal"
        active-text-color="#ff7214"
        @select="handleSelect"
      >
        <el-menu-item index="school">院校库</el-menu-item>
        <el-menu-item index="major">专业库</el-menu-item>
        <el-menu-item index="ai">AI择校</el-menu-item>
        <el-menu-item index="profession">同考试科目</el-menu-item>
        <el-menu-item index="workshop">一对一择校</el-menu-item>
        <el-sub-menu index="">
          <template #title>工具箱</template>
          <el-menu-item index="plan" style="font-size: 14px; font-weight: 500"
            >特殊计划</el-menu-item
          >
          <el-menu-item index="hot" style="font-size: 14px; font-weight: 500"
            >报考热点</el-menu-item
          >
          <el-menu-item index="open" style="font-size: 14px; font-weight: 500"
            >导师评价</el-menu-item
          >
        </el-sub-menu>
      </el-menu> -->
      <div class="container">
        <router-view></router-view>
      </div>
      <!-- <div class="footer">
        <div>
          <div class="infos" style="margin-top: 10px">
            <span
              class="left"
              @click="toAgreement({ type: 88991, name: '关于我们' })"
              >关于我们</span
            >
            <span class="left" @click="showAbout">{{
              connectUsdata.tips
            }}</span>
            <span
              class="left"
              @click="handleImitate({ url: 'https://beian.miit.gov.cn/' })"
              >{{ recordData }}</span
            >
            <span
              class="left"
              @click="handleImitate({ url: 'https://tj.ykakaoyan.cn' })"
              >友情链接: 考研调剂模拟系统</span
            >
          </div>
        </div>
      </div> -->
    </div>
    <template v-if="imgUrl">
      <el-dialog
        class="my-dialog"
        v-model="store.state.loginModel"
        :show-close="false"
        :before-close="closeDialog"
        width="320px"
      >
        <div class="login-form">
          <img class="img" :src="imgUrl" />
          <div class="tips">
            {{ imgText }}
            <!-- 扫码回复关键字『<span
              class="active"
              >登录码</span
            >』获取 -->
          </div>
          <el-input
            class="code"
            v-model="dynamicCode"
            @change="dynamicCodeChange"
            placeholder="请输入6位动态码"
          >
            <template #prefix>
              <img
                src="../../assets/images/code.svg"
                style="width: 24px; height: 24px"
              />
            </template>
          </el-input>
          <!-- <el-select
            style="width: 100%"
            class="code"
            v-model="kaoYanYear"
            clearable
            placeholder="报考年份"
          >
            <el-option
              v-for="item in yearList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
          <el-button
            class="login"
            type="primary"
            color="#ff7214"
            style="color: #fff"
            @click="handleLogin"
            >登录</el-button
          >
          <!-- <div class="agree">
            <span>注册登录即表示同意</span>
            <el-button
              type="primary"
              link
              @click="toAgreement({ type: 8905, name: '用户协议' })"
              >用户协议</el-button
            >
            <span>和</span>
            <el-button
              type="primary"
              link
              @click="toAgreement({ type: 8904, name: '隐私政策' })"
              >隐私政策</el-button
            >
          </div> -->
          <div class="agree">
            <!-- <el-button
              type="primary"
              link
              @click="toAgreement({ type: 88991, name: '关于我们' })"
              >关于我们</el-button
            > -->
            <div
              class="infos"
              style="font-size: 12px; cursor: pointer; margin-left: 5px"
              @click="handleImitate({ url: 'https://beian.miit.gov.cn/' })"
            >
              <span>{{ recordData }}</span>
            </div>
          </div>
        </div>
      </el-dialog>
    </template>
    <el-dialog width="320px" v-model="showAboutDialog">
      <div style="width: 280px; height: 320px; text-align: center">
        <img style="width: 240px; height: 240px" :src="connectUsdata.content" />
        <!-- <p style="text-align: left;font-size: 14px;color: #333">{{connectUsdata.tips}}</p> -->
      </div>
    </el-dialog>
    <div class="unlock">
      <el-dialog
        v-model="store.state.unlockDialog"
        width="670"
        align-center
        :before-close="onUnlockClose"
      >
        <div class="unlock-content">
          <el-icon @click="onUnlockClose" color="#f92f60" class="no-inherit">
            <CloseBold />
          </el-icon>
          <img src="@/assets/unlock-bg.png" />
          <div class="unlock-main">
            <div class="unlock-title">解锁信息</div>
            <div class="unlock-bg">
              <img src="@/assets/unlock-vip.png" class="unlock-vip" />
              <div style="width: 580px">
                <div>
                  <div class="unlock-tips1">
                    <div>研可岸择校网上线后免费服务了上百万用户</div>
                    <div class="mt10">
                      过高成本无法长久运营，决定每位用户将
                      <span>收费1元 (拼团)</span>
                    </div>
                    <div class="mt10">
                      <el-button type="success">限时优惠</el-button>
                    </div>
                  </div>
                  <div class="fl-center">
                    <div class="unlock-step">
                      <div class="fl-start-center">
                        <div class="unlock-step-top">
                          <div class="unlock-step-top-title">step1</div>
                          <div class="unlock-step-top-content fl-start-center">
                            <img :src="step1" class="unlock-step-top-code" />
                            <div class="unlock-step-top-text">
                              <div>微信扫码</div>
                              <div class="mt5">支付费用</div>
                            </div>
                          </div>
                        </div>
                        <div class="unlock-step-top ml10">
                          <div class="unlock-step-top-title">step2</div>
                          <div class="unlock-step-top-content fl-start-center">
                            <img :src="step2" class="unlock-step-top-code" />
                            <div class="unlock-step-top-text">
                              <div>微信扫码</div>
                              <div class="mt5">复制订单号</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="unlock-step-bottom mt20">
                        <div class="unlock-step-bottom-title">step3</div>
                        <div class="unlock-step-bottom-content fl-start-center">
                          <div>
                            <el-input
                              class="unlock-step-bottom-input"
                              clearable
                              v-model="unlockForm.yzOid"
                              placeholder="输入E开头订单号"
                            />
                          </div>
                          <div>
                            <el-button
                              class="unlock-step-bottom-button"
                              color="#f5c98f"
                              :dark="true"
                              :loading="buttonLoading"
                              @click="onUnlockClick"
                              >确认</el-button
                            >
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="mt40 fl-space-between-center">
                  <div class="unlock-tips2">
                    <div class="tips-title">Q：为什么我的订单号激活失效？</div>
                    <div class="tips-subtitle">
                      A：拼团订单只有拼团成功后才能激活
                    </div>
                  </div>
                  <div class="unlock-service">
                    <div class="unlock-service-code">
                      <img :src="keFuUrl" />
                    </div>
                    <div class="unlock-service-title">扫码联系客服</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <div class="unlock">
        <el-dialog
          v-model="store.state.tipsDialog"
          width="670"
          align-center
          :before-close="onTipsClose"
        >
          <div class="unlock-content">
            <el-icon @click="onTipsClose" color="#f92f60" class="no-inherit">
              <CloseBold />
            </el-icon>
            <img src="@/assets/unlock-bg.png" />
            <div class="unlock-main">
              <div class="unlock-title">解锁信息</div>
              <div class="unlock-bg">
                <img src="@/assets/unlock-vip.png" class="unlock-vip" />
                <div style="width: 580px">
                  <div>
                    <div class="unlock-tips1">
                      <div>
                        注意：您的查询次数已达到上限，详情可查看👉
                        <el-link
                          style="font-weight: bold"
                          type="success"
                          @click="toAgreement({ type: 8905, name: '用户协议' })"
                          >用户协议</el-link
                        >
                      </div>
                      <div class="mt10">
                        如您需要继续查询，可以扫下方二维码购买查询次数
                      </div>
                    </div>
                    <div class="fl-center">
                      <div class="unlock-step">
                        <div class="fl-start-center">
                          <div class="unlock-step-top">
                            <div class="unlock-step-top-title">step1</div>
                            <div
                              class="unlock-step-top-content fl-start-center"
                            >
                              <img
                                :src="tipsStep1"
                                class="unlock-step-top-code"
                              />
                              <div class="unlock-step-top-text">
                                <div>微信扫码</div>
                                <div class="mt5">支付费用</div>
                              </div>
                            </div>
                          </div>
                          <div class="unlock-step-top ml10">
                            <div class="unlock-step-top-title">step2</div>
                            <div
                              class="unlock-step-top-content fl-start-center"
                            >
                              <img
                                :src="tipsStep2"
                                class="unlock-step-top-code"
                              />
                              <div class="unlock-step-top-text">
                                <div>微信扫码</div>
                                <div class="mt5">复制订单号</div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="unlock-step-bottom mt20">
                          <div class="unlock-step-bottom-title">step3</div>
                          <div
                            class="unlock-step-bottom-content fl-start-center"
                          >
                            <div>
                              <el-input
                                class="unlock-step-bottom-input"
                                clearable
                                v-model="unlockForm.yzOid"
                                placeholder="输入E开头订单号"
                              />
                            </div>
                            <div>
                              <el-button
                                class="unlock-step-bottom-button"
                                color="#f5c98f"
                                :dark="true"
                                :loading="buttonLoading"
                                @click="onTipsClick"
                                >确认</el-button
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="mt40 fl-center">
                    <div class="unlock-service">
                      <div class="unlock-service-code">
                        <img :src="tipsKeFuUrl" />
                      </div>
                      <div class="unlock-service-title">扫码联系客服</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </div>
      <div class="upload">
        <el-dialog
          v-model="store.state.numberDialog"
          title="查询次数过多"
          width="530"
          destroy-on-close
          center
        >
          <div>
            每天最多查询100次，超过次数后需要24小时后再查，请查看
            <el-link
              style="font-weight: bold"
              type="success"
              @click="toAgreement({ type: 8905, name: '用户协议' })"
              >👉用户协议</el-link
            >
            <!-- <div>1、查询次数过多(请查看用户协议第三条<el-link style="font-weight: bold;" type="success" @click="toAgreement({ type: 8905, name: '用户协议' })">👉用户协议</el-link>)</div>
          <div style="margin-top: 10px">
            2、考研辅导老师可申请更多次数<el-link style="font-weight: bold;" type="success" @click="showAbout">👉点此联系我们（备注：择校网次数增加）</el-link>
          </div> -->
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="store.state.numberDialog = false"
                >关闭</el-button
              >
            </div>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute, onBeforeRouteUpdate } from "vue-router";
import Clipboard from "clipboard";
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/theme-chalk/el-message-box.css";
import {
  loginImage,
  login,
  newLogin,
  connectUs,
  recordNumber,
  connectUsPopup,
  examineYear,
  vipBecomeDueTime,
  changeUnlock,
  activationVip,
  changeUnlockAugment,
  tipsVip,
  settledType,
} from "@/api/api";
import { decrypt } from "@/utils/parseDate";
import { useStore } from "vuex";
const router = useRouter();
const route = useRoute();
const store = useStore();
// 激活新的会员
async function onTipsClick() {
  if (unlockForm.value.yzOid == "") {
    ElMessage({
      message: "请填写E开头订单号",
      type: "warning",
      showClose: true,
    });
    return;
  }
  buttonLoading.value = true;
  const result = await changeUnlockAugment(unlockForm.value);
  const deRes = JSON.parse(decrypt(result));
  console.log(deRes);
  if (deRes.status === 0) {
    location.reload();
    unlockForm.value.yzOid = "";
    ElMessage.success("激活成功!");
    buttonLoading.value = false;
    store.commit("setTipsDialog", false);
    callChildMethod();
  } else {
    ElMessage({
      message: deRes.msg,
      type: "warning",
      showClose: true,
    });
    buttonLoading.value = false;
  }
}
function onTipsClose() {
  store.commit("setTipsDialog", false);
}
const tipsStep1 = ref("");
const tipsStep2 = ref("");
const tipsKeFuUrl = ref("");
// 获取激活引导图片
async function getTipsActivationVip() {
  try {
    const result = await tipsVip();
    if (result.status === 0) {
      let res = JSON.parse(result.result);
      console.log(res);
      tipsStep1.value = res.step1;
      tipsStep2.value = res.step2;
      tipsKeFuUrl.value = res.keFuUrl;
    }
  } catch (error) {
    // throw new Error(error)
  }
}

// 默认展示菜单
const activeIndex = ref("school");
onBeforeRouteUpdate((to) => {
  activeIndex.value = to.name;
});
const handleImitate = (item) => {
  window.open(item.url, "_blank");
};
const handleSelect = (item) => {
  if (item == "open") {
    window.open("https://pingjia.ykakaoyan.cn", "_blank");
    return;
  }
  console.log(item,'item');
  router.push(item);
};
function onSpecial() {
  ElMessageBox.confirm("感谢利之学姐对网站无偿提出的一些宝贵意见", {
    title: "特别感谢",
    type: "warning",
    center: true,
  })
    .then(() => {})
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
}
// 报考年份
const kaoYanYear = ref("");
kaoYanYear.value = store.state.isKaoYanYear;
const yearList = ref([]);
const dynamicCode = ref("");
// 联系我们
const connectUsdata = ref("");
// 备案号
const recordData = ref("");
const dialogUrl = ref({ content: "", tips: "" });
getLoginImg();
// 展示激活弹框
function onChangeUnlock() {
  if (store.state.isVip) {
    return;
  }
  store.commit("setUnlockDialog", true);
}
// 显示登录弹框
onMounted(() => {
  activeIndex.value = route.name;
  window.localStorage.setItem("activeTab", route.name);
  store.commit("setActiveTab", route.name);
  // getTipsActivationVip();
  // getActivationVip();
  // getConnectUs();
  getRecordNumber();
  // getExamineYear();
});
// 获取报考年份
async function getExamineYear() {
  try {
    const result = await examineYear();
    if (result.status === 0) {
      let list = JSON.parse(result.result);
      yearList.value = list.map((item) => {
        return {
          label: item.show,
          value: String(item.kaoYanYear),
        };
      });
    }
  } catch (error) {
    // throw new Error(error)
  }
}
function dynamicCodeChange(val) {
  dynamicCode.value = val;
  // const value = parseInt(val);
  // if (!isNaN(value)) {
  //   dynamicCode.value = val;
  // } else {
  //   ElMessage.warning("请输入正确的动态码!");
  //   dynamicCode.value = "";
  // }
}
const imgUrl = ref("");
const imgText = ref("");
// 展示登录框
function showLoginModal() {
  store.commit("setLoginModel", true);
}
async function getLoginImg() {
  try {
    const result = await loginImage();
    if (result.status === 0) {
      let info = JSON.parse(result.result);
      imgUrl.value = info.qrCodeUrl;
      imgText.value = info.bottomDesc;
      // const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiLmib7kuKrlpb3lrabplb_lrablp5AiLCJ1c2VySWQiOiI5OTAwMDAwMCJ9.224y05VGI38igHjtgrAXmnLMkQ9a_7hVq7I5IQ8BOxk'
      // window.localStorage.setItem('token',token)
      // store.commit('setLoginModel',true)
    }
  } catch (e) {
    // throw new Error(e)
  }
}
// 关闭登录框
function closeDialog() {
  if (store.state.token) {
    store.commit("setLoginModel", false);
  }
}
// 解锁按钮
const buttonLoading = ref(false);
// 解锁表单
const unlockForm = ref({
  yzOid: "",
});
// 关闭解锁弹框
function onUnlockClose() {
  store.commit("setUnlockDialog", false);
}
function toAgreement(params) {
  let url = router.resolve({
    path: `/school/agreement/agreement`,
    query: { type: params.type, name: params.name },
  }).href;
  window.open(url);
}
async function onUnlockClick() {
  if (unlockForm.value.yzOid == "") {
    ElMessage({
      message: "请填写E开头订单号",
      type: "warning",
      showClose: true,
    });
    return;
  }
  buttonLoading.value = true;
  const result = await changeUnlock(unlockForm.value);
  const deRes = JSON.parse(decrypt(result));
  console.log(deRes);
  if (deRes.status === 0) {
    location.reload();
    unlockForm.value.yzOid = "";
    ElMessage.success("激活成功!");
    buttonLoading.value = false;
    getVipBecomeDueTime();
    store.commit("setUnlockDialog", false);
  } else {
    ElMessage({
      message: deRes.msg,
      type: "warning",
      showClose: true,
    });
    buttonLoading.value = false;
  }
}
const step1 = ref("");
const step2 = ref("");
const keFuUrl = ref("");
// 获取激活引导图片
async function getActivationVip() {
  try {
    const result = await activationVip();
    if (result.status === 0) {
      let res = JSON.parse(result.result);
      console.log(res);
      step1.value = res.step1;
      step2.value = res.step2;
      keFuUrl.value = res.keFuUrl;
    }
  } catch (error) {
    // throw new Error(error)
  }
}
function onUid() {
  console.log(store.state.uid);
  const clipboard = new Clipboard(`.copy`);
  clipboard.on("success", () => {
    ElMessage.success("复制成功 !");
    clipboard.destroy();
  });
  clipboard.on("error", (e) => {
    ElMessage.warning("该浏览器不支持自动复制!");
    clipboard.destroy();
  });
}
// 获取是否激活和会员到期时间
async function getVipBecomeDueTime() {
  try {
    const result = await vipBecomeDueTime();
    const res = JSON.parse(decrypt(result));
    console.log(res);
    if (res.status === 0) {
      window.localStorage.setItem("uid", res.result.uid);
      store.commit("setUid", res.result.uid);
      window.localStorage.setItem("isOrganization", res.result.organization);
      store.commit("setOrganization", res.result.organization);
      window.localStorage.setItem("isSuperRole", res.result.superRole);
      store.commit("setSuperRole", res.result.superRole);
      window.localStorage.setItem("isVip", res.result.activated);
      store.commit("setIsVip", res.result.activated);
      window.localStorage.setItem(
        "vipTime",
        res.result.vipExpireTime == null ? "" : res.result.vipExpireTime
      );
      store.commit(
        "setVipTime",
        res.result.vipExpireTime == null ? "" : res.result.vipExpireTime
      );
    }
  } catch (error) {}
}
// 登录
async function handleLogin() {
  try {
    if (!dynamicCode.value) {
      ElMessage.warning("请输入动态码 !");
      return;
    }
    // if (!kaoYanYear.value) {
    //   ElMessage.warning("请选择报考年份 !");
    //   return;
    // }
    const data = {
      dynamicCode: dynamicCode.value,
      kaoYanYear: 2024,
    };
    const result = await newLogin(data);
    const res = JSON.parse(decrypt(result));
    console.log(res);
    if (res.status === 0) {
      // getVipBecomeDueTime();
      // window.localStorage.setItem("examKaoYanYear", kaoYanYear.value);
      // store.commit("setKaoYanYear", kaoYanYear.value);
      store.commit("setToken", res.result);
      localStorage.setItem("examToken", res.result);
      window.localStorage.setItem("expiredTime", new Date().getTime());
      store.commit("setLoginModel", false);
      ElMessage.success("登录成功!");
    } else if (res.status === 3) {
      ElMessage.error(res.msg);
    }
  } catch (e) {
    // throw new Error(e)
  }
}
// 退出登录
function loginOut() {
  localStorage.setItem("examToken", "");
  store.commit("setToken", "");
  store.commit("setLoginModel", true);
}
async function toSettled(){
  try {
    const result = await settledType();
    if (result.status === 0) {
      window.open(result.result, "_blank");
    }
  } catch (error) {
    // throw new Error(error)
  }
}
// 联系我们
async function getConnectUs() {
  try {
    const data = await connectUs();
    if (data.status === 0) {
      connectUsdata.value = JSON.parse(data.result);
    }
  } catch (error) {}
}
// 备案号
async function getRecordNumber() {
  try {
    const data = await recordNumber();
    if (data.status === 0) {
      recordData.value = data.result;
    }
  } catch (error) {}
}
const showAboutDialog = ref(false);
function showAbout() {
  showAboutDialog.value = true;
}
async function getConnectUsPopup() {
  try {
    const data = await connectUsPopup();
    if (data.status === 0) {
      dialogUrl.value = data.result;
    }
  } catch (e) {}
}
</script>
<style scoped lang="less">
:deep(.el-menu) {
  font-size: 18px;
  font-weight: 700;
  color: #000;
}
.home {
  padding-top: 30px;
  box-sizing: border-box;
  height: 100vh;
  .top {
    margin: 0 auto;
    padding-bottom: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    img {
      width: 200px;
      margin-left: 20px;
    }
    .avatar {
      width: 36px;
      height: 36px;
      background-color: #846ffe;
      border-radius: 50%;
      cursor: pointer;
    }
    .login {
      .el-button {
        margin-right: 20px;
        color: #fff;
      }
    }
  }
  .main {
    height: calc(100% - 50px);
    .el-menus {
      margin: 0 auto;
      width: 1200px;
      min-width: 1200px;
      :deep(.el-sub-menu__title) {
        font-size: 18px;
        font-weight: 700;
        color: #000;
      }
      .el-menu-item {
        font-size: 18px;
        font-weight: 700;
        color: #000;
      }
      .is-active {
        background-color: #fff;
      }
    }
    // .container {
    //   height: calc(100% - 139px);
    // }
    .footer {
      box-sizing: border-box;
      padding: 12px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      width: 1200px;
      min-width: 1200px;
      height: 80px;
      // background-color: #282828;
      .infos {
        cursor: pointer;
        font-size: 14px;
        color: #333;
        .left {
          margin-right: 10px;
        }
      }
    }
  }
  .my-dialog {
    .el-dialog__header {
      display: none;
    }
    .login-form {
      text-align: center;
      .img {
        width: 240px;
        height: 240px;
        background-color: chocolate;
      }
      .tips {
        margin: 10px 0;
        color: #888;
        font-size: 13px;
        .active {
          font-weight: 500;
          color: #ff7214;
        }
      }
      .login {
        width: 100%;
      }
      .code {
        margin-bottom: 16px;
      }
      .agree {
        margin-top: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        .el-button {
          font-size: 12px;
        }
      }
    }
  }
}
.ml10 {
  margin-left: 10px;
}
.ml20 {
  margin-left: 20px;
}
.ml30 {
  margin-left: 30px;
}
.mt5 {
  margin-top: 5px;
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt40 {
  margin-top: 40px;
}
.pd20 {
  padding: 0 30px;
}
.fl-start-center {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.fl-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fl-space-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.unlock {
  ::v-deep .unlock .el-dialog__body {
    padding: 0 !important;
  }
  ::v-deep .unlock .el-dialog__header {
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin-right: 0 !important;
  }
  ::v-deep .unlock .el-dialog {
    background-color: transparent !important;
    box-shadow: 0 0 0 transparent !important;
  }
  .unlock-content {
    position: relative;
    width: 670px;
    height: 686px;
    img {
      width: 100%;
      height: 100%;
    }
    .unlock-main {
      position: absolute;
      top: 0;
      left: 0;
      width: 650px;
      height: 100%;
      padding: 0 10px 10px;
    }
    .no-inherit {
      position: absolute;
      top: 10px;
      right: 10px;
      font-size: 22px;
      z-index: 9;
    }
    .unlock-vip {
      width: 109px;
      height: 94px;
      position: absolute;
      top: -76px;
      right: 30px;
    }
    .unlock-title {
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      color: #252752;
    }
    .unlock-bg {
      position: relative;
      background-color: #fff;
      border-radius: 10px;
      padding: 40px 0;
      height: 510px;
      display: flex;
      justify-content: center;
      align-items: center;
      .unlock-tips1 {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        text-align: center;

        span {
          color: #ff6802;
          font-size: 22px;
        }
      }
      .unlock-step {
        background-color: #d9e9f7;
        padding: 20px;
        border-radius: 5px;
        margin-top: 30px;
        width: 395px;
        border: 1px dashed #7ec3fe;
        .unlock-step-top-title {
          background-color: #72beff;
          border-radius: 5px 5px 0 0;
          padding: 2px 0;
          width: 50px;
          text-align: center;
          text-align: center;
          color: #fff;
          font-style: italic;
          margin-left: 2px;
        }
        .unlock-step-top-content {
          border: 1px solid #878787;
          background-color: #fff;
          padding: 10px;
          border-radius: 3px;
          text-align: center;
          width: 170px;
          .unlock-step-top-code {
            width: 80px;
            height: 80px;
            background-color: #f8f5f5;
            border-radius: 5px;
          }
          .unlock-step-top-text {
            margin-left: 20px;
            font-size: 14px;
            color: #1d1d1d;
          }
        }
        .unlock-step-bottom-title {
          background-color: #72beff;
          border-radius: 5px 5px 0 0;
          padding: 2px 0;
          width: 50px;
          text-align: center;
          text-align: center;
          color: #fff;
          font-style: italic;
          margin-left: 4px;
        }
        .unlock-step-bottom-input {
          width: 300px;
          height: 40px;
        }
        .unlock-step-bottom-button {
          width: 80px;
          height: 36px;
          font-weight: bold;
          margin-left: 10px;
        }
      }
      .tips-title {
        font-weight: bold;
        font-size: 13px;
        color: #1d1d1d;
      }
      .tips-subtitle {
        font-size: 12px;
        margin-top: 5px;
        color: #1d1d1d;
      }
      .unlock-service {
        .unlock-service-code {
          display: flex;
          justify-content: center;
          align-items: center;
          img {
            background-color: #f8f5f5;
            width: 80px;
            height: 80px;
            border-radius: 5px;
          }
        }
        .unlock-service-title {
          text-align: center;
          font-size: 12px;
          color: #1d1d1d;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
